<template>
  <div>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>菜单管理</span>
      <el-button style="float: right" type="primary" @click="addMenus()" plain >添加一级菜单</el-button>
    </div>
          <!-- 搜索和添加组件区域
            @clear='getUsersList'
            @input='getUsersList'
            -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="rightCode"
        border
        :tree-props="{children: 'menus', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="rightCode"
          label="菜单编号"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="rightText"
          label="菜单名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="rightIcon"
          label="图标"
          width="50">
          <template slot-scope="scope">
            <i :class="scope.row.rightIcon"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="rightType"
          label="菜单类型"
          width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.rightType === 'Folder'" >文件夹</el-tag>
            <el-tag v-if="scope.row.rightType === 'Document'" type="success">文&nbsp;&nbsp;&nbsp;件</el-tag>
            <el-tag v-if="scope.row.rightType === 'REQUEST'" type="warning">请&nbsp;&nbsp;&nbsp;求</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="rightUrl"
          label="菜单地址">
        </el-table-column>
        <el-table-column
          prop="rightTip"
          label="描述">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              v-if="scope.row.rightType == 'Document'"
              plain
              @click="addPer(scope.row.rightCode)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              v-if="scope.row.rightType == 'Folder'"
              plain
              @click="addMenus(scope.row.rightCode)"
            ></el-button>
            <el-tooltip
              class='item'
              effect='dark'
              content='修改请求'
              placement='top'
              v-if="scope.row.rightType == 'REQUEST'"
            >
              <el-button
              size="mini"
                type="warning"
                icon="el-icon-edit"
                plain
                @click="getPermisOne(scope.row.rightCode,scope.row.rightParent)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class='item'
              effect='dark'
              content='修改权限'
              placement='top'
              v-if="scope.row.rightType != 'REQUEST'"
            >
              <el-button
              size="mini"
                type="warning"
                icon="el-icon-edit"
                plain
                @click="getoneMenus(scope.row.rightCode)"
              ></el-button>
             </el-tooltip>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              v-if="scope.row.rightType != 'REQUEST'"
              plain
              @click="del(scope.row.rightCode)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              v-if="scope.row.rightType == 'REQUEST'"
              plain
              @click="delPermis(scope.row.rightCode)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </el-card>
    <!--    添加菜单-->
    <el-dialog
      title="添加菜单"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="clearaddForm">
      <!-- 对话框主体内容 -->
      <el-form ref="addFrom" :model="addFrom" :rules="addFormRules" label-width="80px">
        <el-form-item label="菜单编号" prop="rightCode" >
          <el-input  v-model="addFrom.rightCode" ></el-input>
        </el-form-item>
        <el-form-item label="菜单姓名" prop="rightText"  >
          <el-input v-model="addFrom.rightText"  ></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" prop="rightParent" >
          <el-input  v-model="addFrom.rightParent" disabled></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" prop="rightType" >
          <template>
            <el-radio v-model="addFrom.rightType" label="Folder">文件夹</el-radio>
            <el-radio v-model="addFrom.rightType" label="Document">文件</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="访问路径" prop="rightUrl" >
          <el-input  v-model="addFrom.rightUrl" ></el-input>
        </el-form-item>
        <el-form-item label="菜单说明" prop="rightTip" >
          <el-input  v-model="addFrom.rightTip" ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的操作按钮 -->
      <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
    </el-dialog>

    <!-- 修改菜单对应菜单-->
    <el-dialog
      title="编辑权限"
      :visible.sync="dispatcherDialogVisibleMenus"
      width="50%">
      <!-- 对话框主体内容 -->
      <el-form ref="editFromMenus" :model="editFromMenus" :rules="editFormRules" label-width="80px">
        <el-form-item label="菜单编号" prop="rightCode" >
          <el-input  v-model="editFromMenus.rightCode" ></el-input>
        </el-form-item>
        <el-form-item label="菜单姓名" prop="rightText"  >
          <el-input v-model="editFromMenus.rightText"  ></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" prop="rightParent"  v-if="editFromMenus.rightParent !== '0' ">
         <div class="block">
          <span class="demonstration"></span>
            <el-cascader
            v-model="editFromMenus.rightParent"
            :options="menusData"
            :props="defaultProps"
            ></el-cascader>
        </div>
        </el-form-item>
        <el-form-item label="菜单类型" prop="rightType" >
          <template>
            <el-radio v-model="editFromMenus.rightType" label="Folder">文件夹</el-radio>
            <el-radio v-model="editFromMenus.rightType" label="Document">文件</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="访问路径" prop="rightUrl" >
          <el-input  v-model="editFromMenus.rightUrl" ></el-input>
        </el-form-item>
        <el-form-item label="菜单说明" prop="rightTip" >
          <el-input  v-model="editFromMenus.rightTip" ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的操作按钮 -->
      <span slot="footer" class="dialog-footer">
            <el-button @click="dispatcherDialogVisibleMenus = false">取 消</el-button>
            <el-button type="primary" @click="updateMenus">确 定</el-button>
          </span>
    </el-dialog>

    <!--修改权限-->
    <el-dialog
      title="编辑权限"
      :visible.sync="dispatcherDialogVisiblePermis"
      width="50%"
      @close="clearEditPermisForm">
      <!-- 对话框主体内容 -->
      <el-form ref="editPermisFrom" :roles="editFormRules" :model="editPermisFrom" label-width="80px">
        <el-form-item label="权限编号" prop="perId" >
          <el-input v-model="editPermisFrom.perId" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限路径" prop="perUrl" >
          <el-input v-model="editPermisFrom.perUrl" ></el-input>
        </el-form-item>
        <el-form-item label="权限内容" prop="perContent"  >
          <el-input v-model="editPermisFrom.perContent"  ></el-input>
        </el-form-item>
          <el-form-item label="权限标题" prop="perText"  >
          <el-input v-model="editPermisFrom.perText"  ></el-input>
        </el-form-item>
          <el-form-item label="权限菜单" prop="perRightCode"  >
          <el-input v-model="editPermisFrom.perRightCode" disabled ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的操作按钮 -->
      <span slot="footer" class="dialog-footer">
            <el-button @click="dispatcherDialogVisiblePermis = false">取 消</el-button>
            <el-button type="primary" @click="editPermis">确 定</el-button>
          </span>
    </el-dialog>

    <!--    添加权限-->
    <el-dialog
      title="添加权限"
      :visible.sync="showAddPermis"
      width="50%"
      @close="clearAddPermisForm">
      <!-- 对话框主体内容 -->
      <el-form ref="addPermisFrom" :model="addPermisFrom" :rules="addFormRules" label-width="80px">
        <el-form-item label="权限路径" prop="perUrl" >
          <el-input v-model="addPermisFrom.perUrl" ></el-input>
        </el-form-item>
        <el-form-item label="权限内容" prop="perContent"  >
          <el-input v-model="addPermisFrom.perContent"  ></el-input>
        </el-form-item>
          <el-form-item label="权限标题" prop="perText"  >
          <el-input v-model="addPermisFrom.perText"  ></el-input>
        </el-form-item>
          <el-form-item label="权限菜单" prop="perRightCode"  >
          <el-input v-model="addPermisFrom.perRightCode" disabled ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的操作按钮 -->
      <span slot="footer" class="dialog-footer">
            <el-button @click="showAddPermis = false">取 消</el-button>
            <el-button type="primary" @click="addPermis">确 定</el-button>
          </span>
    </el-dialog>
    </div>
</template>

<script>
export default ({
  data () {
    return {
      defaultProps: {
        checkStrictly: true,
        children: 'menus',
        label: 'rightText',
        value: 'rightCode'
      },
      tableData: [],
      menusData: [],
      Rtable: {
        roleId: '',
        mentId: ''
      },
      addDialogVisible: false,
      showAddPermis: false,
      dispatcherDialogVisibleMenus: false,
      dispatcherDialogVisiblePermis: false,
      checkedCities: [],
      checkAll: false,
      isIndeterminate: true,
      results: [],
      editPermisFrom: {
        perId: '',
        perUrl: '',
        perContent: '',
        perText: '',
        perRightCode: ''
      },
      addPermisFrom: {
        perId: '',
        perUrl: '',
        perContent: '',
        perText: '',
        perRightCode: ''
      },
      editFromMenus: {
        rightCode: '',
        rightText: '',
        rightTip: '',
        rightUrl: '',
        rightParent: '0',
        rightType: 'Folder'
      },
      addFrom: {
        rightCode: '',
        rightText: '',
        rightTip: '',
        rightUrl: '',
        rightParent: '0',
        rightType: 'Folder'
      },
      editFormRules: {
        rightCode: [
          { required: true, message: '编号不能为空', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在2-8之间', trigger: 'blur' }
        ],
        rightText: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在2-15之间', trigger: 'blur' }
        ],
        rightTip: [
          { required: true, message: '菜单说明不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在2-15之间', trigger: 'blur' }
        ]
      },
      addFormRules: {
        rightCode: [
          { required: true, message: '编号不能为空', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在2-8之间', trigger: 'blur' }
        ],
        rightText: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在2-15之间', trigger: 'blur' }
        ],
        rightTip: [
          { required: true, message: '菜单说明不能为空', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在2-15之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async gettableData () {
      const { data: result } = await this.$http.get(
        'user-server/right/permis'
      )
      if (result.result === 'SUCCESS') {
        this.tableData = result.data
      } else {
        this.$message.error('查询失败')
      }
    },
    // 加载菜单
    async getoneMenus (id) {
      // 查询单个数据详情
      const { data: resule } = await this.$http.get('user-server/right/selectById/' + id)
      this.editFromMenus = resule.data
      // this.checkedCities.length = 0
      // this.checkedCities.push(resule.data.rightParent)
      const { data: result } = await this.$http.get('user-server/right/folders')
      // 加载所有的菜单
      this.menusData = result.data
      // 设置选中菜单
      // const { data: results } = await this.$http.get('user-server/sys-role-right/getByRoleId/' + id)
      // results.data.forEach(element => {
      //   this.checkedCities.push(element.rfRightCode)
      // })
      this.dispatcherDialogVisibleMenus = true
    },
    addMenus (rightCode) {
      if (rightCode !== undefined) {
        this.addFrom.rightParent = rightCode
      }
      this.addDialogVisible = true
    },
    add () {
      this.$refs.addFrom.validate(async valid => {
        if (!valid) {
          return
        }
        const { data: resule } = await this.$http.post('user-server/right/add', this.addFrom)
        if (resule.result !== 'SUCCESS') {
          this.$message.error(resule.message)
        }
        this.$message.success('添加成功')
        // this.gettableData()
        location.reload()
        this.addDialogVisible = false
      })
    },
    clearEditPermisForm () {
      this.$refs.editPermisFrom.resetFields()
      this.checkedCities = []
    },
    clearaddForm () {
      this.$refs.addFrom.resetFields()
    },
    clearAddPermisForm () {
      this.$refs.addPermisFrom.resetFields()
    },
    del (id) {
      this.$confirm('会将与之关联的关系删除，是否删除该权限?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: result } = await this.$http.delete('user-server/right/del/' + id,
          {
            roleId: id,
            roleFlag: 0
          })
        if (result.result !== 'SUCCESS') {
          this.$message({
            type: 'error',
            message: result.message
          })
        } else {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // this.gettableData()
          location.reload()
        }
      }).catch((error) => {
        console.log()
        this.$message({
          type: 'warning',
          message: error.response.data.msg
        })
      })
    },
    async updateMenus () {
      if (Array.isArray(this.editFromMenus.rightParent)) {
        this.editFromMenus.rightParent = this.editFromMenus.rightParent[this.editFromMenus.rightParent.length - 1]
      }
      const { data: resule } = await this.$http.post('user-server/right/update', this.editFromMenus)
      if (resule.result === 'SUCCESS') {
        this.$message.success('修改成功！')
        location.reload()
      } else {
        this.$message.success(resule.message)
      }
      this.dispatcherDialogVisibleMenus = false
    },
    // 显示修改个人信息
    async getPermisOne (id, perRightCode) {
      console.log(perRightCode)
      // 查询单个数据详情
      const { data: resule } = await this.$http.get('user-server/sys-permis/selectById/' + id)
      this.editPermisFrom = resule.data
      this.editPermisFrom.perRightCode = perRightCode
      this.dispatcherDialogVisiblePermis = true
    },
    async editPermis () {
      this.$refs.editPermisFrom.validate(async valid => {
        if (!valid) {
          return
        }
        const { data: resule } = await this.$http.post('user-server/sys-permis/update', this.editPermisFrom)
        if (resule.result !== 'SUCCESS') {
          this.$message.error(resule.message)
        }
        this.$message.success('更新成功')
        this.gettableData()
        this.dispatcherDialogVisiblePermis = false
      })
    },
    addPer (perRightCode) {
      this.addPermisFrom.perRightCode = perRightCode
      this.showAddPermis = true
    },
    addPermis () {
      this.$refs.addPermisFrom.validate(async valid => {
        if (!valid) {
          return
        }
        const { data: resule } = await this.$http.post('user-server/sys-permis/add', this.addPermisFrom)
        if (resule.result !== 'SUCCESS') {
          this.$message.error(resule.message)
        } else {
          this.$message.success('添加成功')
        }
        this.gettableData()
        this.showAddPermis = false
      })
    },
    delPermis (id) {
      this.$confirm('你确定要删除这个权限吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: result } = await this.$http.delete('user-server/sys-permis/delete/' + id)
        if (result.result !== 'SUCCESS') {
          this.$message({
            type: 'error',
            message: result.message
          })
        } else {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getpermisList()
        }
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error.response.data.msg
        })
      })
    }
  },
  created () {
    this.gettableData()
    // console.log(this.roleAvailable)
  }
})
</script>
